<template>
  <el-input v-bind="$attrs" v-model="name" readonly @click="open">
    <template #append ><div style="cursor: pointer;" @click="clearName">清空</div></template>
  </el-input>
  <role-select ref="roleSelectRef" :multiple="false" @confirm-call-back="callBack"></role-select>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core';
import RoleSelect from '@/components/RoleSelect/index.vue';
import { RoleVO } from '@/api/system/role/types';

const roleSelectRef = ref<InstanceType<typeof RoleSelect>>();

const props = defineProps<{
  modelValue?: string | number;
  name?: string;
}>();

const emit = defineEmits(['update:modelValue', 'update:name']);
const data = useVModel(props, 'modelValue', emit);
const name = useVModel(props, 'name', emit);

const open = () => {
  roleSelectRef.value.open();
};

const callBack = (role?: RoleVO[]) => {
  if (!role || role.length === 0) {
    return;
  }
  data.value = role[0].roleId;
  name.value = role[0].roleName;
};

const _name = computed({
  get() {
    return name.value;
  },
  set(_) {}
});

const clearName = () => {
  if(data.value) {
      data.value = ''
      name.value = ''
  }
}

</script>
